<template>
	<aside>
		<div class="panel panel-bg hidden-xs">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-user newicon"></span> 关注我
			</div>
			<hr style="margin:0 0 10px 0" />
			<div class="gzwm">
				<ul>
					<li><a class="xlwb" :href="getRealUrl('weibo')" target="_blank" title="新浪微博">微博</a></li>
					<li><a class="lxyx" :href="getRealUrl('email')" target="_blank" title="联系邮箱">email</a></li>
					<li><a class="wechat" href="javascript:void(0)" @click="toggleWechat" title="微信">微信</a></li>
					<li><a class="github" :href="getRealUrl('github')" target="_blank" title="github">github</a></li>
				</ul>
			</div>
			<div class="show-wechat" v-if="show">
				<img :src="contact.wechat">
				<p>添加请注明来意,再次点击可隐藏</p>
			</div>
		</div>
	</aside>
</template>
<script>
    import {mapGetters} from 'vuex'

	export default {
		computed: {
            ...mapGetters([
              'contact'
            ])
        },
		data() {
			return {
				show: false
			}
		},
		methods: {
			toggleWechat() {
				if(!this.contact.wechat) {
					alert('博主暂未设置')
					return true
				}
				this.show = !this.show
			},
			getRealUrl(type) {
				if(!this.contact[type]) {
					return 'javascript:alert(\'博主暂未设置\')'
				}
				if(type == 'email') {
					return 'mailto:'+this.contact.email
				}
				return this.checkHasHttp(this.contact[type])
			},
			checkHasHttp(url) {
				return url.indexOf('http') == -1 ? `http://${url}` : url
			}
		}
	}
</script>

<style lang="scss" scope>
	.hidden-xs {
		.gzwm {
			width: 100%;
			padding-left: calc(50% - 150px);
			ul {
				width: 100%;
			    margin: 35px 0;
			    overflow: hidden;
				li {
					width: 52px;
				    margin: 0 18px 0 5px;
				    float: left;
				    a {
						color: #747F8C;
					    width: 100%;
					    text-align: center;
					    padding-top: 60px;
					    float: left;
					    text-decoration: none;
					}
				}
			}
			.xlwb {
			    background: url(./static/ico_weibo.jpg) no-repeat scroll 0% 0% transparent;
				&:hover {
				    background: url(./static/ico_weibo_1.png) no-repeat scroll 0% 0% transparent;
				}
			}
			.lxyx {
			    background: url(./static/ico_youxiang.jpg) no-repeat scroll 0% 0% transparent;
			    &:hover {
				    background: url(./static/ico_youxiang_1.png) no-repeat scroll 0% 0% transparent;
				}
			}
			.github {
				background: url(./static/ico_github.png) no-repeat scroll 0% 0% transparent;
				&:hover {
				    background: url(./static/ico_github_1.png) no-repeat scroll 0% 0% transparent;
				}
			}
			.wechat {
			    background: url(./static/ico_wechat.png) no-repeat scroll 0% 0% transparent;
			    &:hover {
				    background: url(./static/ico_wechat_1.png) no-repeat scroll 0% 0% transparent;
				}
			}
		}
		.show-wechat {
			width: 100%;
			cursor: pointer;
			text-align: center;
			img {
				border: 2px solid #70bdaa;		
				max-width: 75%;
			}
			p {
				margin: 8px 0;
				color: #b5b1b1;
			}
		}
	}
	
	@media only screen and (max-width: 1199px){
		.gzwm {
			padding-left: calc(50% - 138px);
			ul {
				li {
					margin: 0 12px 0 5px;
				}
			}
		}
	}
</style>